<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery.js" type="text/javascript"></script>
		<script src="../js/bootstrap.min.js" type="text/javascript"></script>
		<link rel="stylesheet" href="../css/bootstrap/bootstrap.min.css" />
		<script src="../js/angular.min.js" type="text/javascript"></script>
	</head>
	<body ng-app="pageApp" ng-controller="pageCtrl">
		<table width="100%" border="1" class="table">
			<tr>
				<th>序号</th>
				<th>编号</th>
				<th>名称</th>
				<th>价格</th>
			</tr>		
			<tr ng-repeat="product in products">
				<td>{{$index+1}}</td>
				<td>{{product.id}}</td>
				<td>{{product.name}}</td>
				<td>{{product.price}}</td>
			</tr>
		</table>
		<!--  分页按钮 -->
			<div>
				<ul class="pagination pull-right">
					<li>
						<a href ng-click="prev()">上一页</a>
					</li>
					<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
						<a ng-click="selectPage(page)">{{page}}</a>
					</li>
					<li>
						<a href ng-click="next()">下一页</a>
					</li>
				</ul>
			</div>
		<script type="text/javascript">
			angular.module("pageApp",[]).controller("pageCtrl",function($scope,$http){
				// 初始化值
				$scope.currentPage = 1 ;
				$scope.pageSize = 5 ;
				$scope.totalPage = 0 ;
				$scope.totalCount = 0 ;
				
				$scope.pageList = new Array();
				// 上一页的方法
				$scope.prev = function(){
					if($scope.currentPage > 1){
						$scope.selectPage($scope.currentPage-1);
					}
					
				}
				
				// 下一页的方法
				$scope.next = function(){
					if( $scope.currentPage < $scope.totalPage){
						$scope.selectPage($scope.currentPage+1);
					}
					
				}
				
				// 当前页
				$scope.selectPage = function(page){
					$http({
						method:'post',
						url:'products'+page+'.json'
						/*params:{"page":page,"rows":pageSize}*/
					}).success(function(data){
						// 
						// $scope.pageItems = data.pageData;
						
						$scope.products=data.products;
						$scope.totalCount = data.totalCount;
						// 总的页数
						$scope.totalPage = Math.ceil($scope.totalCount/$scope.pageSize);
						// 当前页
						$scope.currentPage = page;
						var begin;
						var end;
						
						begin = page-5;
						if(begin < 1){
							begin = 1;
						}
						
						end = begin + 9;
						if(end > $scope.totalPage){
							end = $scope.totalPage
						}
						
						begin = end - 9;
						if(begin < 1){
							begin = 1;
						}
						
						for(var i = begin ;i <= end ;i++){
							$scope.pageList.push(i)
						}
					}).error(function(data){
						alert("出错了")
					});
				}
				// 判断是否是当前页isActivePage(page)
				$scope.isActivePage = function(page){
					return $scope.currentPage === page;
				}
				
				//没次都初始化到第一页
				$scope.selectPage(1);
			});
		</script>
	</body>
</html>
